<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title> by Coleduck </title>
    <link rel="stylesheet" type="text/css" href="./input.css"/>
    <link rel="stylesheet" type="text/css" href="./button.css"/>
</head>

<body>


<div id = "header" style = "width: 100%; height: 40px;">
    <h1 style = "margin-bottom: 0; margin-top: 0; background-color: rgba(0, 0, 0, 0.5);"> Welcome to Website </h1>
</div>

<div style="display: flex; height: 710px;">

    <div id = "menu1" style = "flex-grow: 1; width: 33%; background-color: rgba(75, 246, 189, 0.5);">
        <b style = "font-size: 30px; font-family: 华文黑体; ">作业清单</b> <br>
        <div id = "todoGroup">
            <div id = "todo_kuang" class = "kuang">
                
                <div id = "todo1" class = "Todo" value = "巩固计算机组成原理第六章">
                    <b style = "font-family: 幼圆; font-size: 16px; float: left; margin-left: 10px; margin-top: 17px;">巩固计算机组成原理第六章</b>
                    <input type = "button" class = "bt" id = "sc1" value = "删除" onclick="del(1)" style="float: right; margin-right: 10px; margin-top: 10px;">
                    <input type = "button" class = "bt" id = "wc1" value = "完成" onclick="cpl(1)" style="float: right; margin-right: 10px; margin-top: 10px;">
                </div>
                
                <div id = "todo2" class = "Todo" value = "数字图像p31-2.9,2.10"> 
                    <b style = "font-family: 幼圆; font-size: 16px; float: left; margin-left: 10px; margin-top: 17px;">数字图像p31-2.9,2.10</b>
                    <input type = "button" class = "bt" id = "sc2" value = "删除" onclick="del(2)" style="float: right; margin-right: 10px; margin-top: 10px;">
                    <input type = "button" class = "bt" id = "wc2" value = "完成" onclick="cpl(2)" style="float: right; margin-right: 10px; margin-top: 10px;">
                </div>

                <div id = "todo3" class = "Todo" value = "日语听力第一、二章单词背诵"> 
                    <b style = "font-family: 幼圆; font-size: 16px; float: left; margin-left: 10px; margin-top: 17px;">日语听力第一、二章单词背诵</b>
                    <input type = "button" class = "bt" id = "sc3" value = "删除" onclick="del(3)" style="float: right; margin-right: 10px; margin-top: 10px;">
                    <input type = "button" class = "bt" id = "wc3" value = "完成" onclick="cpl(3)" style="float: right; margin-right: 10px; margin-top: 10px;">
                </div>

                <div id = "todo4" class = "Todo" value = "练字"> 
                    <b style = "font-family: 幼圆; font-size: 16px; float: left; margin-left: 10px; margin-top: 17px;">练字</b>
                    <input type = "button" class = "bt" id = "sc4" value = "删除" onclick="del(4)" style="float: right; margin-right: 10px; margin-top: 10px;">
                    <input type = "button" class = "bt" id = "wc4" value = "完成" onclick="cpl(4)" style="float: right; margin-right: 10px; margin-top: 10px;">
                </div>

            </div>
        </div>
    </div>

    <div id = "menu2" style = "flex-grow: 1; width: 34%;  background-color: rgba(249, 125, 241, 0.4);">
        <b style = "font-size: 30px; font-family: 华文黑体;"> </b> <br><br><br><br><br>
        <div class = "item">
            <div class="wrapper">
                <div class="input-data">
                    <input id = "input1" type="text" required="" onkeyup="keyup(event)"/>
                    <div class="underline"></div>
                    <label>Input</label>
                </div>
            </div> <br>

            <div class = "slide" id = "bt1" button onclick="add()"/> 
            <p style = "font-size: 25px; font-family: 幼圆;"> 添加 </p>
            </div> <br><br><br>

        </div>
    </div>


    <div id = "menu3" style = "flex-grow: 1; width: 33%; background-color: rgba(61, 195, 248, 0.5);">
        <b style = "font-size: 30px; font-family: 华文黑体;">已完成</b> <br>
        <div id = "doneGroup">
            <div id = "done_kuang" class = "kuang">
                
                <div id = "todo5" class = "Todo" value = "配置VS桌面应用程序开发的环境"> 
                    <b style = "font-family: 幼圆; font-size: 16px; float: left; margin-left: 10px; margin-top: 17px;">配置VS桌面应用程序开发的环境</b>
                    <input type = "button" class = "bt" id = "sc5" value = "删除" onclick="del(5)" style="float: right; margin-right: 10px; margin-top: 10px;">
                    <input type = "button" class = "bt" id = "ch5" value = "撤回" onclick="rec(5)" style="float: right; margin-right: 10px; margin-top: 10px;">
                </div>

                <div id = "todo6" class = "Todo" value = "配置Python运行环境">
                    <b style = "font-family: 幼圆; font-size: 16px; float: left; margin-left: 10px; margin-top: 17px;">配置Python运行环境</b>
                    <input type = "button" class = "bt" id = "sc6" value = "删除" onclick="del(6)" style="float: right; margin-right: 10px; margin-top: 10px;">
                    <input type = "button" class = "bt" id = "ch6" value = "撤回" onclick="rec(6)" style="float: right; margin-right: 10px; margin-top: 10px;">
                </div>
                
            </div>
        </div>
    </div>

</div>

</body>


<script lang="javascript">

    var cnt_total = 6;

    function getValue() {
        var temp = document.getElementById("input1");
        console.log(temp.value);
        return temp.value;
    }
    function add(e) {
        cnt_total += 1;
        var temp = getValue();
        if (temp == "") return;
        document.getElementById("todo_kuang").innerHTML += 
        "<div id = 'todo" + e + "' class = 'Todo' value = '" + temp + "'>" +
            "<b style = 'font-family: 幼圆; font-size: 16px; float: left; margin-left: 10px; margin-top: 17px;'>" + temp + "</b>" +
            "<input type = 'button' class = 'bt' id = 'sc" + e + "' value = '删除' onclick='del(" + e + ")' style='float: right; margin-right: 10px; margin-top: 10px;'>" +
            "<input type = 'button' class = 'bt' id = 'wc" + e + "' value = '完成' onclick='cpl(" + e + ")' style='float: right; margin-right: 10px; margin-top: 10px;'>" +
        "</div>"

        setDb();
    }
    function del(e) {
        document.getElementById("todo" + e).remove();
        cnt_total -= 1;
        setDb();
    }
    function cpl(e) {
        var temp = document.getElementById("todo" + e).innerText;
        document.getElementById("todo" + e).remove();
        document.getElementById("done_kuang").innerHTML += 
        "<div id = 'todo"+e+"' class = 'Todo' value = '"+temp+"'>" +
            "<b style = 'font-family: 幼圆; font-size: 16px; float: left; margin-left: 10px; margin-top: 17px;'>"+temp+"</b>" +
            "<input type = 'button' class = 'bt' id = 'sc"+e+"' value = '删除' onclick='del("+e+")' style='float: right; margin-right: 10px; margin-top: 10px;'>" + 
            "<input type = 'button' class = 'bt' id = 'ch"+e+"' value = '撤回' onclick='rec("+e+")' style='float: right; margin-right: 10px; margin-top: 10px;'>" +
        "</div>"
        setDb();
    }
    function rec(e) {
        var temp = document.getElementById("todo" + e).innerText;
        document.getElementById("todo" + e).remove();
        document.getElementById("todo_kuang").innerHTML += 
        "<div id = 'todo"+e+"' class = 'Todo' value = '"+temp+"'>" +
            "<b style = 'font-family: 幼圆; font-size: 16px; float: left; margin-left: 10px; margin-top: 17px;'>"+temp+"</b>" +
            "<input type = 'button' class = 'bt' id = 'sc"+e+"' value = '删除' onclick='del("+e+")' style='float: right; margin-right: 10px; margin-top: 10px;'>" +
            "<input type = 'button' class = 'bt' id = 'wc"+e+"' value = '完成' onclick='cpl("+e+")' style='float: right; margin-right: 10px; margin-top: 10px;'>" +
        "</div>"
        setDb();
    }
    function keyup(e) {
        if (e.keyCode == 13) {
            add();
        }
    }

    function getDb(){
        var todo_kuang = localStorage.getItem("todo_kuang");
        if(todo_kuang){
            document.getElementById("todo_kuang").innerHTML = todo_kuang;
        }

        var done_kuang = localStorage.getItem("done_kuang");
        if(done_kuang){
            document.getElementById("done_kuang").innerHTML = done_kuang;
        }
    }

    function setDb(){
        localStorage.setItem("todo_kuang",document.getElementById("todo_kuang").innerHTML);
        localStorage.setItem("done_kuang",document.getElementById("done_kuang").innerHTML);
    }

    getDb();
</script>


<style type = "text/css">
    body {
        height: 100%;
        text-align:center;
        background-image: url("49.png");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .input {
        outline-style: none;
        border: 1px solid #c0c4cc;
        border-radius: 10px;
        width: 300px;
        height: 100%;
        padding: 0;
        padding: 10px 15px;
        box-sizing: border-box;
    }

    .kuang {
        border: 3px solid #333333;
        border-radius: 10px;
        position: absolute;
        padding: 15px 15px 15px 15px;
        margin-left: 25px;
        margin-top: 25px;
        box-shadow: rgba(239, 48, 48, 0.5);
    }

    .Todo {
        width: 400px;
        height: 50px;
        margin-top: 10px;
        border: 1px solid #333333;
        border-radius: 8px;
    }

    .Todo:hover {
        background-color: rgba(206, 39, 231, 0.501);
        transform: scale(1.2);
    }

    .bt {
        position: relative;
        display: inline-block;
        height: 30px;
        width: 50px;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        user-select: none;
        color: rgba(10, 35, 45, 0.501);
        opacity: 0;
    }

    .Todo:hover .bt {
        opacity: 1;
    }

</style>

</html>